<template>
    <div ref="reportsBoxRef" class="reports-box"></div>
</template>
<script setup>
import {ref ,onMounted} from 'vue'
import * as echarts from 'echarts'
import axios from 'axios';
import _ from 'lodash'
const reportsBoxRef=ref(null)
const options={
    title:{
        text:'用户来源',
    },
    tooltip:{
        trigger:'axis',
        axisPointer:{
            type:'cross',
            label:{
                backgroundColor:'#E9EEf3'
            }
        }
    },
    grid:{
        left:'3%',
        right:'4%',
        bottom:'3%',
        containLabel:true
    },
    xAxis:[
        {
            boundaryGap:false
        }
    ],
    yAxis:[
        {
            type:'value'
        }
    ]
}
onMounted(async() => {
    var myChart=echarts.init(reportsBoxRef.value);
    const {data:res}=await axios.get(`reports/type/1`)
    if(res.meta.status!==200) return
    console.log(res);
    const result=_.merge(res.data,options)
    myChart.setOption(result)
})
</script>
<style>
.reports-box{
    width:600px;
    height:400px;
}
</style>